<template>
  <div>
    <el-form :inline="true" :model="form" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12" :offset="5">
          <div class="grid-content bg-purple">
            <el-form-item label="目标IP" :label-width="labelWidth">
              <el-input v-model="form.socket0DIP" autocomplete="off" placeholder="例如192.168.1.253"></el-input>
            </el-form-item>
            <el-form-item label="目标端口" :label-width="labelWidth">
              <el-input v-model="form.dport" autocomplete="off" placeholder="例如32500"></el-input>
            </el-form-item>
            <el-form-item label="本地端口" :label-width="labelWidth">
              <el-input v-model="form.sport" autocomplete="off" placeholder="例如32500"></el-input>
            </el-form-item>
            <el-form-item label="通讯模式" :label-width="labelWidth">
              <el-select v-model="form.mode" placeholder="请选择通讯模式">
                <el-option label="TCPServer" :value="0"></el-option>
                <el-option label="TCPClient" :value="1"></el-option>
                <el-option label="UDPClient" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="激活状态" :label-width="labelWidth">
              <el-select v-model="form.enable" placeholder="请选择激活状态">
                <el-option label="Disable" :value="0"></el-option>
                <el-option label="Enable" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="updatePortConfig">确 定</el-button>
      <el-button @click="dialogFormVisible">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import qs from "qs";
  import deviceApi from "@/api/device";
  export default {
    name: "PortEdit",
    props: {
      deviceCode: 0,
      port: 0,
    },
    inject: ['closeEdit'],
    data() {
      return {
        loading: false,
        labelWidth: "160px",
        form: {},
        currentPage: 1, //默认显示页面为1
        pageSize: 5, //    每页的数据条数
        pageTotal: 1,
        devices: [],
        onlineDeviceCount: 0,
        offlineDeviceCount: 0,
        deviceSearchForm: {
          deviceState: null,
          deviceCode: null,
          deviceType: null,
          deviceIp: null,
        },
      };
    },
    computed: {},
    created() { },
    mounted() {
      //this.show(this.devInfo);
      //this.form = devInfo.deviceCode;
      //this.form.deviceId = this.devInfo.deviceCode;
      this.init();
    },
    methods: {
      // init() {
      //   deviceApi.getDeviceStatistics().then((response) => {
      //     if (response.data) {
      //       this.onlineDeviceCount = response.data.onlineDevice;
      //       this.offlineDeviceCount = response.data.offlineDevice;
      //     }
      //   });
      // },
      init() {
        let root = this;
        root.loading = true;
        deviceApi.getPortConfig(this.deviceCode, this.port).then(
          (response) => {
            root.loading = false;
            if (response.data) {
              this.form = response.data;
            }
          },
          (err) => {
            root.loading = false;
          }
        );
      },
      updatePortConfig() {
        let root = this;
        this.loading = true;
        this.form.port = this.port;  // 添加端口类型到数据中
        // 点击确定时主页编辑按钮变灰
        this.closeEdit(this.deviceCode, true);
        deviceApi
          .updatePortConfig(this.deviceCode, this.form.port, this.form)
          .then(
            (response) => {
              root.loading = false;
              root.dialogFormVisible();
              this.$message({
                message:
                  "更新端口配置命令已下发，设备正在重启，大约需要一分钟。",
                type: "success",
              });
            },
            (err) => {
              root.loading = false;
            }
          );
      },
      dialogFormVisible() {
        this.$parent.$parent.$parent.hide();
      },
    },
  };
</script>
<style>
  .device-list-charts {
    text-align: left;
    margin-top: 20px;
  }

  .device-list-pagination {
    margin-top: 30px;
  }
</style>